<template>
	<view class="charts-box">
		<view class="order-title">
			<view class="t1"> 订单数据统计 </view>
			<view class="t2"> （单位：单） </view>
		</view>
		<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
	</view>
</template>

<script>
	export default {
		props: ['data', 'total'],
		data() {
			return {
				chartData: {},
				opts: {}
			};
		},
		mounted() {
			this.getServerData();
		},
		methods: {
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					const {
						status_0,
						status_1,
						status_2,
						status_3,
						status_4,
						status_5
					} = this.data
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						series: [{
							data: [{
								"name": "待付款：" + status_0,
								"value": status_0,

							}, {
								"name": "待发货：" + status_1,
								"value": status_1,

							}, {
								"name": "已发货：" + status_2,
								"value": status_2,

							}, {
								"name": "已完成：" + status_3,
								"value": status_3,

							}, {
								"name": "已关闭：" + status_4,
								"value": status_4,

							}, {
								"name": "退款中：" + status_5,
								"value": status_5,

							}]
						}]
					};
					let options = {
						rotate: false,
						rotateLock: false,
						color: ['#FDCC00', '#0CD9B5', '#94BFFF', '#0098FA', '#3B72AD', '#F27629'],
						padding: [0, 0, 0, 0],
						dataLabel: false,
						enableScroll: false,
						tapLegend: false,
						legend: {
							show: true,
							position: "right",
							lineHeight: 25
						},
						label: {
							normal: {
								show: true,
								position: function(params) {
									let center = params.center;
									let radius = params.radius;
									let angle = params.angle;
									// 调整偏移量来控制位置，可按需微调
									let offsetX = 20 * Math.cos(angle);
									let offsetY = 20 * Math.sin(angle);
									let x = center[0] + radius * Math.cos(angle) + offsetX;
									let y = center[1] + radius * Math.sin(angle) + offsetY;
									return [x, y];
								},
								formatter: function(params) {
									return params.percent + '%';
								}
							}
						},
						title: {
							name: "总订单",
							fontSize: 12,
							color: "#666"
						},
						subtitle: {
							name: this.total,
							fontSize: 25,
							color: "#333"
						},
						extra: {
							ring: {
								activeOpacity: 0.5,
								activeRadius: 10,
								offsetAngle: 0,
								labelWidth: 15,
								border: false
							}
						}
					}
					this.chartData = JSON.parse(JSON.stringify(res));
					this.opts = JSON.parse(JSON.stringify(options));
				}, 500);
			},
		}
	};
</script>

<style lang="scss" scoped>
	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
		width: 100%;
		height: 225px;
		background-color: #fff;
		padding: 15px 12px 10px;
		box-sizing: border-box;
		margin-bottom: 10px;
		border-radius: 10px;

		.order-title {
			display: flex;
			align-items: center;

			.t1 {
				color: #333;
				font-size: 14px;
				line-height: 14px;
			}

			.t2 {
				color: #999;
				font-size: 12px;
				line-height: 12px;
			}
		}
	}
</style>